<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<div class="search-box">
				<el-button-group>
					<el-button :type="buttonType(2)" @click="checkTab(2)">销售中({{ orderNum.sellNum }})</el-button>
					<el-button :type="buttonType(3)" @click="checkTab(3)">仓库中({{ orderNum.storeNum }})</el-button>
					<el-button :type="buttonType(4)" @click="checkTab(4)">预警中({{ orderNum.warningNum }})</el-button>
					<el-button :type="buttonType(5)" @click="checkTab(5)">回收站中({{ orderNum.delNum }})</el-button>
					<el-button :type="buttonType(6)" @click="checkTab(6)">待审核({{ orderNum.checkNum }})</el-button>
					<el-button :type="buttonType(7)" @click="checkTab(7)">审核未通过({{ orderNum.denyNum }})</el-button>
				</el-button-group>
				<el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: 20px">
					<el-form-item label="商品名称">
						<el-input v-model="searchForm.name" placeholder="" clearable></el-input>
					</el-form-item>
					<el-form-item label="商品类型">
						<el-select v-model="searchForm.type" clearable>
							<el-option label="普通商品" value="1" />
							<el-option label="虚拟商品" value="2" />
							<el-option label="卡密商品" value="3" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品分类">
						<el-select v-model="searchForm.cate_id" placeholder="请选择" clearable>
							<el-option-group v-for="group in goodsCate" :key="group.id" :label="group.name">
								<el-option v-for="item in group.children" :key="item.id" :label="item.name"
										   :value="item.id"></el-option>
							</el-option-group>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div style="
					width: 100%;
					height: 0;
					border-bottom: #e4e7ed 1px dashed;
					margin-bottom: 15px;
				"></div>
			<el-button type="primary" icon="el-icon-plus" @click="addGoods">添加商品</el-button>
			<el-button type="primary" icon="el-icon-shopping-cart-full" @click="shelves(1)">批量上架</el-button>
			<el-button type="primary" icon="el-icon-shopping-cart" @click="shelves(2)">批量下架</el-button>
			<el-button type="primary" icon="el-icon-delete" @click="deleteAll" v-if="searchForm.tab_type == 2">
				批量删除
			</el-button>
			<el-button type="primary" icon="el-icon-refresh-left" @click="recoverAll" v-if="searchForm.tab_type == 5">
				批量恢复
			</el-button>
			<div style="
					width: 100%;
					height: 0;
					border-bottom: #e4e7ed 1px dashed;
					margin-top: 10px;
				"></div>
			<el-table :data="tableData" @selection-change="handleSelectionChange" :row-style="{ height: '57px' }"
					  style="width: 100%; font-size: 12px">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="id" label="商品ID" width="75"></el-table-column>
				<el-table-column label="商品图" width="100">
					<template #default="scope">
						<el-image :src="scope.row.pic" style="width: 36px; height: 36px"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="商品名称">
					<template #default="scope">
						{{ scope.row.name }}<br/>
						<span class="svip" v-if="scope.row.vip == 1">SVIP</span>
					</template>
				</el-table-column>
				<el-table-column prop="cate" label="商品分类"></el-table-column>
				<el-table-column prop="price" label="商品售价" width="100"></el-table-column>
				<el-table-column prop="sales" label="销量" width="100"></el-table-column>
				<el-table-column prop="stock" label="库存" width="100"></el-table-column>
				<el-table-column label="状态" width="100">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.is_show == 1">上架</el-tag>
						<el-tag type="danger" v-if="scope.row.is_show == 2">下架</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="250">
					<template #default="scope">
						<el-button @click="handleEdit(scope.row)" type="text" v-if="scope.row.is_del == 2" size="small">编辑
						</el-button>
						<el-button @click="handleDel(scope.row)" type="text" v-if="scope.row.is_del == 2" size="small">删除
						</el-button>
						<el-button @click="handleVip(scope.row)" type="text" v-if="svip" size="small">会员价</el-button>
						<el-button @click="handleCard(scope.row)" type="text" v-if="scope.row.type == 3" size="small">卡密信息
						</el-button>
						<el-button @click="handleRecover(scope.row)" type="text" v-if="scope.row.is_del == 1" size="small">恢复
						</el-button>
						<el-button @click="handleSubmitGoods(scope.row)" type="text" v-if="scope.row.status == 3" size="small">提审
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<Pages :form="searchForm" :page-obj="page" @pageChange="pageChangeHandle" @pageJump="getList"></Pages>

			<el-dialog title="卡密详情" v-model="dialogVisible" width="900px" :close-on-click-modal="false">
				<el-table :data="cardTable" style="width: 100%">
					<el-table-column prop="id" label="ID"></el-table-column>
					<el-table-column prop="card_no" label="卡号"></el-table-column>
					<el-table-column label="状态">
						<template #default="scope">
							<el-tag type="success" v-if="scope.row.status == 1">激活</el-tag>
							<el-tag type="danger" v-if="scope.row.status == 2">已使用</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间"></el-table-column>
				</el-table>
				<el-pagination
					background
					layout="->, prev, pager, next"
					:page-size="cardForm.limit"
					@current-change="cardPageChangeHandle"
					:total="page.cardTotal"
				>
				</el-pagination>
			</el-dialog>

			<el-dialog title="SVIP价格设置" v-model="vipPriceVisible" width="700px" :close-on-click-modal="false">
				<el-form ref="svipForm" :model="svipForm" label-width="80px">
					<el-form-item label="是否参与">
						<el-radio v-model="svipForm.join" :label="1">参与</el-radio>
						<el-radio v-model="svipForm.join" :label="2">不参与</el-radio>
					</el-form-item>
					<el-form-item label="价格设置" v-if="svipForm.join == 1">
						<el-table :data="svipForm.rulePrice" border v-if="svipForm.type == 1">
							<el-table-column label="售价">
								<template #default="scope">
									{{ scope.row.price }}
								</template>
							</el-table-column>
							<el-table-column label="会员价">
								<template #default="scope">
									<el-input v-model="scope.row.vipPrice"></el-input>
								</template>
							</el-table-column>
						</el-table>
						<el-table :data="svipForm.rulePrice" border v-if="svipForm.type == 2">
							<el-table-column prop="sku" label="规格"></el-table-column>
							<el-table-column label="售价">
								<template #default="scope">
									{{ scope.row.price }}
								</template>
							</el-table-column>
							<el-table-column label="会员价">
								<template #default="scope">
									<el-input v-model="scope.row.vipPrice"></el-input>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="saveVip">保存</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</el-card>
	</el-main>
</template>

<script>
import Pages from '@/components/pages'

export default {
	components: {
		Pages
	},
	data() {
		return {
			goodsCate: [],
			treeProps: {
				value: "id",
				label: "name",
				children: "child",
				checkStrictly: true,
			},
			selectedCate: [],
			searchForm: {
				cate_id: "",
				tab_type: 2,
				type: "",
				name: "",
				page: 1,
				limit: 10,
			},
			page: {
				total: 0,
				cardTotal: 0,
			},
			tableData: [],
			goodsIds: [],
			cardTable: [],
			cardForm: {
				goods_id: 0,
				status: "",
				page: 1,
				limit: 10,
			},
			dialogVisible: false,
			svip: false,
			vipPriceVisible: false,
			svipForm: {
				goods_id: 0,
				type: 2, // 1:单规格 2:多规格
				join: 2,
				rulePrice: [{price: 0, vipPrice: 0}],
			},
			orderNum: {}
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		async getList() {
			let res = await this.$API.goods.list.get(this.searchForm);
			this.tableData = res.data.list.data;
			this.tableData.map((item) => {
				item.pic = JSON.parse(item.slider_image)[0];
				return item;
			});
			this.orderNum = res.data.order_num
			this.page.total = res.data.list.total;
			this.goodsCate = res.data.cate;
			this.svip = res.data.vip;
		},
		// 搜索
		onSubmit() {
			this.searchForm.page = 1;
			this.getList();
		},
		// 添加商品
		addGoods() {
			this.$router.push({path: "/goods/add"});
		},
		// 删除
		handleDel(item) {
			this.$confirm("确定删除该商品？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(async () => {
					let res = await this.$API.goods.del.post({
						id: item.id,
					});
					if (res.code == 0) {
						this.$message.success(res.msg);
						setTimeout(() => {
							this.getList();
						}, 500);
					} else {
						this.$message.error(res.msg);
					}
				}).catch(() => {});
		},
		// 恢复商品
		handleRecover(item) {
			this.$confirm("确定恢复该商品？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(async () => {
					let res = await this.$API.goods.recover.post({id: item.id,});
					if (res.code == 0) {
						this.$message.success(res.msg);
						setTimeout(() => {
							this.getList();
						}, 500);
					} else {
						this.$message.error(res.msg);
					}
				})
				.catch(() => {
				});
		},
		// 编辑
		handleEdit(item) {
			this.$router.push({path: "/goods/edit", query: {id: item.id}});
		},
		// 选择状态
		checkTab(type) {
			this.searchForm.tab_type = type;
			this.getList();
		},
		handleSelectionChange(val) {
			this.goodsIds = [];
			val.forEach((item) => {
				this.goodsIds.push(item.id);
			});
		},
		// 翻页
		pageChangeHandle(page) {
			this.searchForm.page = page;
			this.getList();
		},
		// 批量上下架
		shelves(isShow) {
			if (this.goodsIds.length == 0) {
				this.$message.error("请勾选需要操作的商品");
				return false;
			}

			let title = "确定要下架该批商品？";
			if (isShow == 1) {
				title = "确定要上架该批商品？";
			}

			this.$confirm(title, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(async () => {
					let res = await this.$API.goods.shelf.post({
						ids: this.goodsIds,
						is_show: isShow,
					});

					if (res.code == 0) {
						this.$message.success("操作成功");
						this.getList();
					} else {
						this.$message.error(res.msg);
					}
				})
				.catch(() => {
				});
		},
		// 选择样式
		buttonType(type) {
			if (this.searchForm.tab_type == type) {
				return "primary";
			}
		},
		// 批量删除
		async deleteAll() {
			if (this.goodsIds.length == 0) {
				this.$message.error("请勾选需要操作的商品");
				return false;
			}

			this.$confirm("确定删除该商品？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(async () => {
					let res = await this.$API.goods.del.post({
						id: this.goodsIds.join(","),
					});
					if (res.code == 0) {
						this.$message.success(res.msg);
						setTimeout(() => {
							this.getList();
						}, 500);
					} else {
						this.$message.error(res.msg);
					}
				})
				.catch(() => {
				});
		},
		// 批量恢复
		recoverAll() {
			if (this.goodsIds.length == 0) {
				this.$message.error("请勾选需要操作的商品");
				return false;
			}

			this.$confirm("确定恢复该商品？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(async () => {
					let res = await this.$API.goods.recover.post({
						id: this.goodsIds.join(","),
					});
					if (res.code == 0) {
						this.$message.success(res.msg);
						setTimeout(() => {
							this.getList();
						}, 500);
					} else {
						this.$message.error(res.msg);
					}
				})
				.catch(() => {
				});
		},
		// 查看卡密
		async handleCard(row) {
			this.dialogVisible = true;
			this.cardForm.goods_id = row.id;
			this.cardForm.page = 1;
			this.getCardList();
		},
		// 获取卡密列表
		async getCardList() {
			let res = await this.$API.goods.card.get(this.this.cardForm);
			if (res.code == 0) {
				this.cardTable = res.data.data;
				this.page.cardTotal = res.data.total;
			}
		},
		// 翻页
		cardPageChangeHandle(val) {
			this.cardForm.page = val;
			this.getCardList();
		},
		// 会员价
		async handleVip(row) {
			let res = await this.$API.vip.getPrice.get({
				goods_id: row.id,
				spec: row.spec,
			});
			this.svipForm.type = row.spec;
			this.svipForm.join = res.data.isJoin;
			this.svipForm.rulePrice = [];
			this.svipForm.goods_id = row.id;

			// 单规格
			if (row.spec == 1) {
				let vipPrice = res.data.goodsInfo.price;
				if (res.data.vipPriceList.length > 0) {
					vipPrice = res.data.vipPriceList[0].price;
				}
				this.svipForm.rulePrice.push({
					price: res.data.goodsInfo.price,
					vipPrice: vipPrice,
				});
			} else {
				res.data.ruleList.forEach((item) => {
					this.svipForm.rulePrice.push({
						rule_id: item.id,
						sku: item.sku.replace("※", " "),
						price: item.price,
						vipPrice: item.vipPrice,
					});
				});
			}

			this.vipPriceVisible = true;
		},
		// 保存vip售价
		async saveVip() {
			let res = await this.$API.vip.setPrice.post(this.svipForm);
			if (res.code == 0) {
				this.$message.success("设置成功");
				this.vipPriceVisible = false;
				this.getList();
			} else {
				this.$message.error(res.msg);
			}
		},
		// 商品提审
		handleSubmitGoods(row) {
			console.log('xxx', row)
		}
	},
};
</script>

<style scoped>
.el-form-item {
	margin-bottom: 10px !important;
}
.page-div {
	margin-top: 20px;display: flex;justify-content: right
}
.page-jump {
	display: flex;
	align-items: center;
	margin-left: 10px;
}
.el-table__row td {
	height: 57px !important;
}

.primary {
	color: #fff;
	background-color: #409eff;
	border-color: #409eff;
}

.svip {
	border-radius: 3px;
	font-size: 12px;
	line-height: 14px;
	padding: 2px 4px;
	margin-top: 3px;
	background-color: #393d49;
	color: #f9f9a3;
	border: none;
}
.el-button--small {
	padding: 0 !important;
}
</style>
